<template>
  <div class="reg">
    <div class="reg-main">
      <img src="@/assets/img/login/logo.png" class="logo" alt="" />
      <section>
        <form novalidate>
          <md-field>
            <input-validate
              v-model="info.mobile"
              placeholder="请输入您的手机号"
              v-validate="'required|mobile'"
              name="mobile"
              type="phone"
              icon="iconzhanghao"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="您的手机号"
              :error="errors.first('mobile')"
            >
            </input-validate>
            <input-validate
              v-model="info.password"
              placeholder="请输入您的密码"
              v-validate="'required|min:6'"
              name="password"
              type="password"
              icon="iconmima"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="您的密码"
              :error="errors.first('password')"
            >
            </input-validate>
            <input-validate
              class="input"
              placeholder="输入确认密码"
              v-model="info.confirmPwd"
              type="password"
              name="confirm"
              icon="iconmima"
              v-validate="{ required: 'true', is: info.password }"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="确认密码"
              :error="errors.first('confirm')"
            >
            </input-validate>
            <input-validate
              v-model="info.imgCode"
              placeholder="输入您的图形验证码"
              v-validate="'required|max:4'"
              rightType="1"
              :imgUrl="imgSrc"
              name="imgCode"
              type="digit"
              icon="iconyanzhengma"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="图形验证码"
              :error="errors.first('imgCode')"
              @changeImg="changeImg"
            >
            </input-validate>
            <input-validate
              v-model="info.code"
              placeholder="请输入短信验证码"
              v-validate="'required|max:6'"
              rightType="2"
              name="code"
              type="digit"
              icon="iconduanxinyanzhengma"
              data-vv-value-path="innerValue"
              data-vv-validate-on="input"
              data-vv-as="短信验证码"
              :error="errors.first('code')"
              @sendCode="sendCode"
              ref="code"
            >
            </input-validate>
          </md-field>
          <div>
            <md-button
              type="primary"
              class="regBtn"
              block
              html-type="submit"
              @click="regBtn"
              >注册</md-button
            >
            <div class="agreement">
              <p @click="consentBtn">
                <i
                  v-show="consent"
                  class="iconfont iconxuanzhong"
                  style="font-size: 14px;color: #327EB9;"
                ></i>
              </p>
              <p @click="showFullScreen = true">我已同意平台服务协议</p>
            </div>
          </div>
          <md-landscape v-model="showFullScreen" full-screen>
            <div class="agreementContent">
              <p>
                今天晚上，很好的月光。
              </p>
              <p>
                我不见他，已是三十多年；今天见了，精神分外爽快。才知道以前的三十多年，全是发昏；然而须十分小心。不然，那赵家的狗，何以看我两眼呢？
              </p>
              <p>
                我怕得有理。
              </p>
              <p>
                今天全没月光，我知道不妙。早上小心出门，赵贵翁的眼色便怪：似乎怕我，似乎想害我。还有七八个人，交头接耳的议论我，张着嘴，对我笑了一笑；我便从头直冷到脚根，晓得他们布置，都已妥当了。
              </p>
              <p>
                我可不怕，仍旧走我的路。前面一伙小孩子，也在那里议论我；眼色也同赵贵翁一样，脸色也铁青。我想我同小孩子有什么仇，他也这样。忍不住大声说，“你告诉我！”他们可就跑了。
              </p>
              <p>
                我想：我同赵贵翁有什么仇，同路上的人又有什么仇；只有廿年以前，把古久先生的陈年流水簿子⑶，踹了一脚，古久先生很不高兴。赵贵翁虽然不认识他，一定也听到风声，代抱不平；约定路上的人，同我作冤对。但是小孩子呢？那时候，他们还没有出世，何以今天也睁着怪眼睛，似乎怕我，似乎想害我。这真教我怕，教我纳罕而且伤心。
              </p>
              <p>
                我明白了。这是他们娘老子教的！
              </p>
              <p>
                晚上总是睡不着。凡事须得研究，才会明白。
              </p>
            </div>
          </md-landscape>
        </form>
      </section>
    </div>
  </div>
</template>

<script>
import { InputItem, Field, Button, Landscape } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "login",
  components: {
    inputValidate,
    [Landscape.name]: Landscape,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      showFullScreen: false,
      imgSrc: "", //图形验证码src
      consent: true, //同意平台协议
      info: {
        mobile: "",
        password: "",
        confirmPwd: "",
        imgCode: "",
        code: "",
        invitationCode: ""
      }
    };
  },
  methods: {
    regBtn() {
      this.$validator.validate().then(result => {
        if (result) {
          if (this.consent) {
            this.$ajax
              .post(this.$api.register, {
                mobile: this.info.mobile,
                password: this.info.confirmPwd,
                code: this.info.code,
                invite: this.info.invitationCode
              })
              .then(() => {
                this.$toast.succeed("注册成功！");
                this.$router.push({ name: "login" });
              })
              .catch(err => {
                this.$toast.failed(err);
              });
          } else {
            this.$toast.failed("请您同意平台服务协议！");
          }
        }
      });
    },
    getCode() {
      this.$ajax
        .get(this.$api.getPicCode)
        .then(res => {
          this.imgSrc = res.data.code;
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    },
    changeImg() {
      this.getCode();
    },
    consentBtn() {
      if (this.consent) {
        this.consent = false;
      } else {
        this.consent = true;
      }
    },
    sendCode() {
      this.$validator
        .validateAll({
          imgCode: this.info.imgCode,
          mobile: this.info.mobile,
          password: this.info.password,
          confirm: this.info.confirmPwd
        })
        .then(result => {
          if (result) {
            let data = {
              mobile: this.info.mobile,
              type: "login",
              code: this.info.imgCode
            };
            this.$ajax
              .post(this.$api.sendLoginCode, data)
              .then(() => {
                this.$refs.code.countdown();
              })
              .catch(err => {
                this.$toast.failed(err);
              });
          } else {
            this.$toast.failed("请你输入完整信息！");
          }
        });
    }
  },
  mounted() {
    this.getCode();
    let test = window.location.href;
    let invitationCode = test.split("=")[1];
    this.info.invitationCode = invitationCode;
  }
};
</script>

<style scoped lang="stylus">
.reg{
  background-image: url("../../assets/img/login/loginBg.png");
  background-size: 100%;
  background-repeat:no-repeat;
  padding 186px 24px 112px 24px;
}
.reg-main{
  background-color #ffffff;
  position relative;
  border-radius 20px;
  box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.3);
}
.logo{
  width: 149px;
  position absolute;
  left 50%;
  margin-left -74.5px;
  margin-top -74.5px;
}
section{
  padding 207px 52px 91px 52px;
}
.imgCode{
  height: 60px;
  width: 152px;
}
.regBtn{
  width: 43%;
  height: 64px;
  text-align center;
  line-height 64px;
  font-size 26px;
  color #ffffff;
  background-color #327EB9;
  border-radius 16px;
  margin: 40px auto 19px;
}
.md-button.primary::after{
  border none;
}
.agreement{
  display flex;
  align-items center;
  justify-content center;
}
.agreement>p:first-child{
  width: 24px;
  height: 24px;
  border:1px solid #327EB9;
  border-radius:50%;
}
.agreement>p:last-child{
  font-size 20px;
  color #a2a2a2;
  margin-left 29px;
  text-decoration underline;
}
.agreementContent{
  padding 50px 20px 0;
  line-height 40px;
}
</style>
